Honeycodeでモバイルとウェブで別レイアウトを作成する方法
いわさです。
Honeycodeのアプリはウェブ版とモバイル版でのチーム内共有が可能です。
画面作成時はデフォルトではウェブ版とモバイル版でレイアウトがリンクされており、モバイル版のレイアウトを作成することでウェブ版のレイアウトも作成されます。
今回はモバイルとウェブで別のレイアウトを構築する方法を試してみたいと思います。
はじめに
Amazon Honeycodeは現在ベータ版です。
バージョンアップ時、正式リリース時には変わっている可能性がありますのでご注意ください。
ウェブ版とモバイル版について
HoneycodeはHoneycodeモバイルアプリにサインインすることでチーム内のアプリにアクセスすることが出来ます。
モバイル版でウェブサイトからサインインした場合はどうなるでしょうか。
Honeycodeポータル画面にサインインしようとするとアプリからアクセスするよう誘導されてアクセス出来ません。
モバイル版Chrome機能の"PC版サイトを見る"を使えば一応アクセスは出来ます。
しかし、アプリを選択するとモバイルアプリに遷移します。
やはりモバイルデバイスではモバイルアプリでの利用が前提のようです。
デフォルトはモバイル版レイアウトのみ作成すれば済む
スクラッチで簡単なUI構築を行ってみます。
ブラウザ版でアクセスすると以下の表示になります。
モバイル版でアクセスすると以下の表示になります。
レイアウトリンク機能を解除
ウェブ版は画面タイトルに"Web"を、モバイル版は画面タイトルに"Mobile"を設定しボタンを縦並びにさせたいと思います。
Screensナビ上でMobileとWebのタブの間のアイコンをクリックします。
注意：リンクを解除すると再リンクすることはできなくなります。また、リンクの有無は画面毎ではなくアプリ内の画面全般の共通設定となります。
確認画面で"Confirm"を押すとリンクが解除されるのでそれぞれの画面で変更を加えて動作確認してみます。
モバイル版を確認してみます。
タイトルがMobileで、ボタンが縦配置になっていますね。
次に、PCブラウザで確認してみます。
タイトルがWebでボタンは横配置のままですね。
まとめ
本日はウェブとモバイルでレイアウトを分ける方法を試しました。
しかし、全画面のレイアウト変更・実装をモバイルとレイアウトで分ける必要があり、その状態から戻すことは出来ないため、リンクの解除は慎重に行ったほうが良いでしょう。
